<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code Jobs - Find Your Next AI-Powered Development Role</title>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YWW6FV2SGN"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-YWW6FV2SGN');
    </script>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="static/favicon/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="static/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="static/favicon/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="static/favicon/android-chrome-512x512.png">

    <meta name="description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://davila7.github.io/claude-code-templates/jobs.html">
    <meta property="og:title" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
    <meta property="og:description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
    <meta property="og:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
    <meta property="og:site_name" content="Claude Code Templates">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://davila7.github.io/claude-code-templates/jobs.html">
    <meta property="twitter:title" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
    <meta property="twitter:description" content="Discover the latest job opportunities requiring Claude Code expertise. Find positions at Anthropic and other companies building the future of AI-powered development.">
    <meta property="twitter:image" content="https://raw.githubusercontent.com/davila7/claude-code-templates/main/social-preview.png">
    <meta property="twitter:image:alt" content="Claude Code Jobs - Find Your Next AI-Powered Development Role">
    <meta property="twitter:creator" content="@davila7">
    <meta property="twitter:site" content="@davila7">
    
    <!-- Additional SEO -->
    <meta name="keywords" content="Claude Code jobs, Anthropic careers, AI development jobs, Claude Code careers, AI engineer positions, developer jobs, AI-powered development, Claude Code opportunities">
    <meta name="author" content="Claude Code Templates Community">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://davila7.github.io/claude-code-templates/jobs.html">
    
    <!-- Claude Code / Anthropic relation -->
    <meta name="product" content="Claude Code Jobs">
    <meta name="platform" content="Anthropic Claude Code">
    <meta name="category" content="AI Development Careers">
    
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.counter.dev/script.js" data-id="1f599060-4af4-4cbc-a809-a158768ab768" data-utcoffset="-4"></script>
    
    <!-- Hotjar Tracking Code for https://aitmpl.com -->
    <script>
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:6519181,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
    
    <style>
        /* Terminal Jobs Page Styling */
        .jobs-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        
        .jobs-header {
            text-align: center;
            margin-bottom: 3rem;
            padding: 2rem 0;
            border-bottom: 1px solid var(--border-primary);
            position: relative;
        }
        
        .jobs-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
            transform: translateX(-50%);
            animation: glow-line 3s ease-in-out infinite;
        }
        
        @keyframes glow-line {
            0%, 100% { opacity: 0.5; width: 100px; }
            50% { opacity: 1; width: 200px; }
        }
        
        .jobs-title {
            color: var(--text-accent);
            font-size: clamp(2rem, 5vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 0 20px rgba(217, 119, 6, 0.3);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            letter-spacing: -0.025em;
        }
        
        .jobs-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 2rem auto;
            line-height: 1.6;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .terminal-prompt-line {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin: 1rem 0;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9rem;
        }
        
        .prompt-symbol {
            color: var(--text-success);
            font-weight: bold;
        }
        
        .prompt-text {
            color: var(--text-primary);
        }
        
        .cursor {
            width: 8px;
            height: 16px;
            background: var(--text-accent);
            display: inline-block;
            animation: blink 1s infinite;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        .jobs-stats {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }
        
        .stat-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 1.5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .stat-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
            transition: left 0.5s ease;
        }
        
        .stat-item:hover::before {
            left: 100%;
        }
        
        .stat-item:hover {
            border-color: var(--text-accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(217, 119, 6, 0.2);
        }
        
        .stat-number {
            display: block;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-accent);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .back-nav {
            margin-bottom: 2rem;
        }
        
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-accent);
            text-decoration: none;
            padding: 0.75rem 1.25rem;
            border: 1px solid var(--border-primary);
            border-radius: 6px;
            transition: all 0.3s ease;
            font-weight: 500;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            background: var(--bg-secondary);
            position: relative;
            overflow: hidden;
        }
        
        .back-link::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.1), transparent);
            transition: left 0.3s ease;
        }
        
        .back-link:hover::before {
            left: 100%;
        }
        
        .back-link:hover {
            background: var(--bg-tertiary);
            border-color: var(--text-accent);
            transform: translateX(-4px);
        }
        
        /* Search and Filter Section */
        .controls-section {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 2rem;
            margin-bottom: 2rem;
            align-items: start;
        }
        
        .search-container {
            position: relative;
        }
        
        .terminal-search-wrapper {
            display: flex;
            align-items: center;
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
        }
        
        .terminal-search-wrapper:focus-within {
            border-color: var(--text-accent);
            box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
        }
        
        .terminal-prompt {
            color: var(--text-success);
            font-weight: bold;
            margin-right: 0.5rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .terminal-search-input {
            flex: 1;
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.95rem;
            outline: none;
            padding: 0.25rem 0;
        }
        
        .terminal-search-input::placeholder {
            color: var(--text-secondary);
        }
        
        .search-icon {
            color: var(--text-secondary);
            margin-left: 0.5rem;
            width: 18px;
            height: 18px;
        }
        
        .controls-section {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .search-container {
            width: 100%;
        }
        
        .filter-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 8px;
            padding: 1.5rem;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        
        .filter-section::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            height: 2px;
            background: linear-gradient(90deg, 
                var(--text-success), 
                var(--text-accent), 
                var(--text-info), 
                var(--text-success)
            );
            background-size: 200% 100%;
            animation: filter-glow 4s linear infinite;
        }
        
        @keyframes filter-glow {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        .filter-title {
            color: var(--text-accent);
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-title::before {
            content: '>';
            color: var(--text-success);
            font-weight: bold;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-btn {
            padding: 0.6rem 1.2rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.85rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            position: relative;
            overflow: hidden;
        }
        
        .filter-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.1), transparent);
            transition: left 0.3s ease;
        }
        
        .filter-btn:hover::before {
            left: 100%;
        }
        
        .filter-btn:hover,
        .filter-btn.active {
            background: rgba(217, 119, 6, 0.15);
            border-color: var(--text-accent);
            color: var(--text-accent);
            transform: translateY(-1px);
        }
        
        .filter-btn.active {
            font-weight: 600;
            box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
        }
        
        /* Jobs Grid */
        .jobs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
            width: 100%;
        }
        
        .job-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-primary);
            border-radius: 12px;
            padding: 1.25rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            backdrop-filter: blur(10px);
            overflow: hidden;
        }
        
        .job-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--text-accent), transparent);
            transition: left 0.5s ease;
        }
        
        .job-card:hover::before {
            left: 100%;
        }
        
        .job-card:hover {
            border-color: var(--text-accent);
            transform: translateY(-8px);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(217, 119, 6, 0.2),
                0 0 20px rgba(217, 119, 6, 0.1);
        }
        
        .job-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            position: relative;
        }
        
        .company-icon {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-secondary);
            padding: 8px;
            flex-shrink: 0;
            object-fit: contain;
            transition: all 0.3s ease;
        }
        
        .job-card:hover .company-icon {
            border-color: var(--text-accent);
            transform: scale(1.05);
        }
        
        .job-info {
            flex: 1;
            min-width: 0;
        }
        
        .job-title {
            color: var(--text-primary);
            font-size: 1.35rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            line-height: 1.3;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            transition: color 0.3s ease;
        }
        
        .job-card:hover .job-title {
            color: var(--text-accent);
        }
        
        .company-name {
            color: var(--text-success);
            font-weight: 500;
            font-size: 1rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .company-name::before {
            content: '@';
            color: var(--text-accent);
            font-weight: bold;
        }
        
        .job-location {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 0.5rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .job-location::before {
            content: '📍';
            font-size: 0.8rem;
        }
        
        .job-description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9rem;
        }
        
        .job-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid var(--border-secondary);
        }
        
        .job-source {
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .job-source::before {
            content: 'via ';
            color: var(--text-accent);
        }
        
        .apply-btn {
            background: linear-gradient(135deg, var(--text-accent), #e8810b);
            color: var(--bg-primary);
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            position: relative;
            overflow: hidden;
        }
        
        .apply-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.3s ease;
        }
        
        .apply-btn:hover::before {
            left: 100%;
        }
        
        .apply-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 8px 25px rgba(217, 119, 6, 0.4);
        }
        
        /* Loading and Empty States */
        .loading {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-accent);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .loading::before {
            content: '> ';
            color: var(--text-success);
            font-weight: bold;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 8px;
            height: 16px;
            background: var(--text-accent);
            margin-left: 4px;
            animation: blink 1s infinite;
        }
        
        .no-jobs {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-secondary);
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        }
        
        .no-jobs h3 {
            color: var(--text-accent);
            margin-bottom: 1rem;
        }
        
        .no-jobs h3::before {
            content: '! ';
            color: var(--text-warning);
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .jobs-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 968px) {
            .controls-section {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .jobs-grid {
                grid-template-columns: 1fr;
            }
            
            .jobs-container {
                max-width: 100%;
                padding: 1.5rem 1rem;
            }
            
            .jobs-stats {
                gap: 1rem;
            }
            
            .stat-item {
                padding: 1rem 1.5rem;
            }
            
            .job-card {
                padding: 1.5rem;
            }
            
            .filter-options {
                justify-content: center;
            }
            
            .controls-section {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 480px) {
            .jobs-container {
                padding: 1rem 0.5rem;
            }
            
            .job-card {
                padding: 1rem;
            }
            
            .job-header {
                flex-direction: column;
                text-align: center;
                gap: 0.75rem;
            }
            
            .company-icon {
                width: 40px;
                height: 40px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="terminal-header">
                    <div class="ascii-title">
                        <pre class="ascii-art"> ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗     ██████╗ ██████╗ ██████╗ ███████╗         ██╗ ██████╗ ██████╗ ███████╗
██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝    ██╔════╝██╔═══██╗██╔══██╗██╔════╝         ██║██╔═══██╗██╔══██╗██╔════╝
██║     ██║     ███████║██║   ██║██║  ██║█████╗      ██║     ██║   ██║██║  ██║█████╗           ██║██║   ██║██████╔╝███████╗
██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝      ██║     ██║   ██║██║  ██║██╔══╝      ██   ██║██║   ██║██╔══██╗╚════██║
╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗    ╚██████╗╚██████╔╝██████╔╝███████╗    ╚█████╔╝╚██████╔╝██████╔╝███████║
 ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝     ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝     ╚════╝  ╚═════╝ ╚═════╝ ╚══════╝</pre>
                    </div>
                    <div class="terminal-subtitle">
                        <span class="status-dot"></span>
                        Career opportunities in <strong>Claude Code</strong> development
                    </div>
                </div>
                <div class="header-actions">
                    <a href="index.html" class="header-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
                        </svg>
                        Home
                    </a>
                    <a href="https://www.anthropic.com/claude-code?ref=aitmpl.com" target="_blank" class="header-btn anthropic-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                        Claude Code
                    </a>
                </div>
            </div>
        </div>
    </header>

    <main class="terminal">
        <div class="jobs-container">
            <div class="back-nav">
                <a href="index.html" class="back-link">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
                    </svg>
                    Back to Templates
                </a>
            </div>

            <div class="search-header">
                <div class="terminal-command">
                    <div class="header-content">
                        <h2 class="search-title"><span class="terminal-dot"></span><strong>Search </strong><span class="title-params">(fullstack/datascientist/research)</span></h2>
                        <p class="search-subtitle">⎿ Find your next AI-powered development role</p>
                    </div>
                </div>
            </div>

            <div class="controls-section">
                <div class="search-container">
                    <div class="terminal-search-wrapper">
                        <span class="terminal-prompt">$</span>
                        <input type="text" class="terminal-search-input" id="search-input" placeholder="search jobs by title, company, or keywords...">
                        <svg class="search-icon" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h3 class="filter-title">Filter by Company</h3>
                    <div class="filter-options" id="company-filters">
                        <button class="filter-btn active" data-company="all">All Companies</button>
                    </div>
                </div>
            </div>

            <div class="jobs-grid" id="jobs-grid">
                <div class="loading">Loading job opportunities...</div>
            </div>
        </div>
    </main>

    <script>
        let allJobs = [];
        let filteredJobs = [];
        let currentSearchTerm = '';
        let currentCompanyFilter = 'all';
        
        // Load and display jobs with enhanced animations
        async function loadJobs() {
            try {
                // Add loading animation
                showLoadingAnimation();
                
                const response = await fetch('claude-jobs.json');
                const data = await response.json();
                allJobs = data.jobs || [];
                filteredJobs = [...allJobs];
                
                // Animate stats counter
                updateStats();
                setupFilters();
                setupSearch();
                renderJobs();
                
            } catch (error) {
                console.error('Error loading jobs:', error);
                document.getElementById('jobs-grid').innerHTML = `
                    <div class="no-jobs">
                        <h3>Unable to load job listings</h3>
                        <p>Please try again later or check back soon for new opportunities.</p>
                    </div>
                `;
            }
        }
        
        function showLoadingAnimation() {
            const loadingElement = document.querySelector('.loading');
            if (loadingElement) {
                loadingElement.style.animation = 'pulse 1.5s ease-in-out infinite';
            }
        }
        
        function updateStats() {
            // Stats removed - no longer needed
        }
        
        
        function setupSearch() {
            const searchInput = document.getElementById('search-input');
            let searchTimeout;
            
            searchInput.addEventListener('input', (e) => {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    currentSearchTerm = e.target.value.toLowerCase().trim();
                    applyFilters();
                }, 300); // Debounce search
            });
            
            // Add search shortcut (Ctrl/Cmd + K)
            document.addEventListener('keydown', (e) => {
                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                    e.preventDefault();
                    searchInput.focus();
                }
            });
        }
        
        function setupFilters() {
            const companies = [...new Set(allJobs.map(job => job.company))].sort();
            const filtersContainer = document.getElementById('company-filters');
            
            // Clear existing filters except "All Companies"
            const allButton = filtersContainer.querySelector('[data-company="all"]');
            filtersContainer.innerHTML = '';
            filtersContainer.appendChild(allButton);
            
            // Add company filters with count
            companies.forEach(company => {
                if (company && company !== 'Unknown Company') {
                    const jobCount = allJobs.filter(job => job.company === company).length;
                    const button = document.createElement('button');
                    button.className = 'filter-btn';
                    button.dataset.company = company;
                    button.innerHTML = `${company} <span style="opacity: 0.7; font-size: 0.8em;">(${jobCount})</span>`;
                    button.addEventListener('click', () => filterByCompany(company));
                    filtersContainer.appendChild(button);
                }
            });
            
            // Add event listener for "All Companies" button
            allButton.addEventListener('click', () => filterByCompany('all'));
        }
        
        function filterByCompany(company) {
            currentCompanyFilter = company;
            
            // Update active filter button with smooth transition
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-company="${company}"]`).classList.add('active');
            
            applyFilters();
        }
        
        function applyFilters() {
            let jobs = [...allJobs];
            
            // Apply company filter
            if (currentCompanyFilter !== 'all') {
                jobs = jobs.filter(job => job.company === currentCompanyFilter);
            }
            
            // Apply search filter
            if (currentSearchTerm) {
                jobs = jobs.filter(job => 
                    job.job_title.toLowerCase().includes(currentSearchTerm) ||
                    job.company.toLowerCase().includes(currentSearchTerm) ||
                    job.description.toLowerCase().includes(currentSearchTerm) ||
                    (job.location && job.location.toLowerCase().includes(currentSearchTerm))
                );
            }
            
            filteredJobs = jobs;
            updateStats();
            renderJobs();
        }
        
        function renderJobs() {
            const container = document.getElementById('jobs-grid');
            
            if (filteredJobs.length === 0) {
                const searchText = currentSearchTerm ? ` for "${currentSearchTerm}"` : '';
                const companyText = currentCompanyFilter !== 'all' ? ` at ${currentCompanyFilter}` : '';
                
                container.innerHTML = `
                    <div class="no-jobs">
                        <h3>No jobs found</h3>
                        <p>No positions found${searchText}${companyText}. Try adjusting your search or filters, or check back later for new opportunities.</p>
                    </div>
                `;
                return;
            }
            
            // Render jobs with staggered animation
            const jobCards = filteredJobs.map((job, index) => `
                <div class="job-card" style="animation-delay: ${index * 0.1}s;">
                    <div class="job-header">
                        <img src="${job.company_icon}" alt="${job.company}" class="company-icon" 
                             onerror="this.src='https://www.aitmpl.com/static/img/logo.png'">
                        <div class="job-info">
                            <h3 class="job-title">${highlightSearchTerms(truncateText(job.job_title, 60))}</h3>
                            <div class="company-name">${highlightSearchTerms(job.company)}</div>
                            <div class="job-location">${job.location || 'Location not specified'}</div>
                        </div>
                    </div>
                    
                    <p class="job-description">${highlightSearchTerms(job.description)}</p>
                    
                    <div class="job-footer">
                        <a href="${job.job_link}" target="_blank" rel="noopener noreferrer" class="apply-btn" 
                           onclick="trackJobApplication('${job.company}', '${job.job_title}')">
                            Apply Now
                        </a>
                    </div>
                </div>
            `).join('');
            
            container.innerHTML = jobCards;
            
            // Add fade-in animation
            const cards = container.querySelectorAll('.job-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.4s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        }
        
        function highlightSearchTerms(text) {
            if (!currentSearchTerm || !text) return text;
            
            const regex = new RegExp(`(${escapeRegex(currentSearchTerm)})`, 'gi');
            return text.replace(regex, '<mark style="background: rgba(217, 119, 6, 0.3); color: inherit; padding: 0 2px; border-radius: 2px;">$1</mark>');
        }
        
        function escapeRegex(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }
        
        function truncateText(text, maxLength) {
            if (!text || text.length <= maxLength) return text;
            return text.substring(0, maxLength).trim() + '...';
        }
        
        function trackJobApplication(company, title) {
            // Analytics tracking for job applications
            if (typeof gtag !== 'undefined') {
                gtag('event', 'job_application_click', {
                    'company': company,
                    'job_title': title,
                    'source': 'claude_jobs_page'
                });
            }
            
            console.log(`Job application tracked: ${company} - ${title}`);
        }
        
        // Enhanced keyboard shortcuts
        document.addEventListener('keydown', (e) => {
            // ESC to clear search
            if (e.key === 'Escape') {
                const searchInput = document.getElementById('search-input');
                if (searchInput.value) {
                    searchInput.value = '';
                    searchInput.dispatchEvent(new Event('input'));
                }
            }
        });
        
        // Add CSS animation keyframes dynamically
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .job-card {
                animation: fadeInUp 0.6s ease-out forwards;
            }
        `;
        document.head.appendChild(style);
        
        // Initialize when page loads
        document.addEventListener('DOMContentLoaded', loadJobs);
        
        // Add smooth scrolling to top when filtering
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        // Performance optimization: Intersection Observer for lazy loading
        const observerOptions = {
            root: null,
            rootMargin: '50px',
            threshold: 0.1
        };
        
        const imageObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                        imageObserver.unobserve(img);
                    }
                }
            });
        }, observerOptions);
    </script>
</body>
</html>